<template>
  <tab-bar>
    <!-- 注意：普通字符串无需使用属性绑定v-bind，变量才需要 -->
    <!-- 可以添加activeColor属性修改激活状态时文字的颜色，不添加则为默认值 -->
    <tab-bar-item link="/home" activeColor="#ff0000">
      <img slot="item-icon" src="~assets/img/tabbar/home.png" alt="">
      <img slot="item-icon-active" src="~assets/img/tabbar/home_active.png" alt="">
      <div slot="item-text">首页</div>
    </tab-bar-item>
    <tab-bar-item link="/category">
      <img slot="item-icon" src="~assets/img/tabbar/category.png" alt="">
      <img slot="item-icon-active" src="~assets/img/tabbar/category_active.png" alt="">
      <div slot="item-text">分类</div>
    </tab-bar-item>
    <tab-bar-item link="/cart">
      <img slot="item-icon" src="~assets/img/tabbar/shopcart.png" alt="">
      <img slot="item-icon-active" src="~assets/img/tabbar/shopcart_active.png" alt="">
      <div slot="item-text">购物车</div>
    </tab-bar-item>
    <tab-bar-item link="/profile">
      <img slot="item-icon" src="~assets/img/tabbar/user.png" alt="">
      <img slot="item-icon-active" src="~assets/img/tabbar/user_active.png" alt="">
      <div slot="item-text">我的</div>
    </tab-bar-item>
  </tab-bar>
</template>

<script>
  // 采用alias别名方式引用文件
  // build/webpack.base.conf.js文件中修改配置
  // 注意在HTML代码中引用时需要在前面添加 "~"
  import TabBar from 'components/tabbar/TabBar';
  import TabBarItem from 'components/tabbar/TabBarItem';

  export default {
    name: 'MainTabBar',
    components: {
      TabBar,
      TabBarItem
    }
  }
</script>

<style>

</style>
